<template>
<div>
  <div>
    <Form ref="form" :model="formData"  :label-width="80">
     <Row>
       <Col span="8">
         <FormItem label="标题" prop="name">
           <input v-model="FormData.title"   placeholder="名称"></input>
         </FormItem>
       </Col>
       <Col span="8">
         <FormItem label="标题" prop="name">
           <input v-model="FormData.name"   placeholder="名称"></input>
         </FormItem>
       </Col>
       <Col span="8">
         <Divider type="vertical">
           <Button type="primary" @click="addRoot">添加</Button>
           <Button type="primary" @click="query">添加</Button>
         </Divider>
       </Col>
     </Row>
    </Form>
  </div>
  <zk-table
    ref="table"
    sum-text="sum"
    index-text="#"
    :data="rows"
    :stripe="props.stripe"
    :border="props.border"
    :show-header="props.showHeader"
    :show-summary="props.showSummary"
    :show-row-hover="props.showRowHovwe"
    :show-index="props.showIndex"
    :tree-type="props.treeType"
    :is-fold="props.isFold"
    :expand-type="props.expandType"
    :selection-type="props.selectionType">
    <template>
      <Button type="primary" size="small" @click="addChild(scope.row.id)">添加</Button>
      <Button type="primary" size="small" @click="edit(scope.row.id)">修改</Button>
      <Button type="primary" size="small" @click="remove(scope.row.id)">删除</Button>
    </template>
  </zk-table>

</div>
</template>
<style scoped>
 .paging{
   float: right;
   margin-top: 10px;
 }
</style>
<script>
import {baseTreeList} from '@/libs/crud/base-tree-list'
export default {
   mixins:[baseTreeList],
   data(){
     return{
       FormData:{
         title:'',
         name:''
       },
       columns:[
         {
           lable:'标题',
           prop:'title'
         },{
           lable: '名称',
           prop:'name'
         },
         {
           lable: '路径',
           prop:'path'
         },
         {
           title: '操作',
           prop:'action',
           type:'temple',
           temple:'action',
           render:(h,params)=>{
             return h( 'div',[
               h('Button',{
                 props:{
                   type:'primary',
                   size:'small'
                 },
                 style:{
                   marginRight:'5px'
                 },
                 on:{
                   click:()=>{
                     this.edit(params.row.id)
                   }
                 }


               },'修改'),
               h('Button',{
                 props:{
                   type:'primary',
                   size:'small'
                 },
                 style:{
                   marginRight:'5px'
                 },
                 on:{
                   click:()=>{
                     this.edit(params.row.id)
                   }
                 }
               },'修改')
             ])
           }
         }
       ]
     }
   }
}
</script>

